<script setup lang="ts">
import { ref, type Ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import post from '../../lib/post'//引入封装请求
import FormItemText from '@/components/FormItemText.vue'; // 引入封装的组件


// 数据
const dialogVisible = ref(false)
const emit = defineEmits(['refreshList']); // defineEmits返回一个方法用来发送事件
const type = ref('')   //储存弹窗的类型
let record: any; // 保存一个临时变量
const form: Ref<{ name: string, text: string, image: string, price: any, originPrice: any, unit: string }> = ref({
    name: '',
    text: '',
    image: '',
    price: '',
    originPrice: '',
    unit: '',
})
const fromRef = ref();


// 函数
const showCreate = () => {
    type.value = 'create'
    dialogVisible.value = true;
}
const showModify = (index: number, row: any) => {
    // console.log();
    record = row
    form.value.name = row.name
    form.value.text = row.text
    form.value.image = row.image
    form.value.price = row.price
    form.value.originPrice = row.originPrice
    form.value.unit = row.unit

    type.value = 'modify'
    dialogVisible.value = true;
}
const submitCreate = async () => {
    // 提交新增

    // 验证
    await fromRef.value.validate(); // 如果验证失败会抛出异常

    const data: any = await post('/create/goods', {
        ...(form.value),
    })
    if (!data.success) {
        return ElMessageBox.alert(data.message)
    }
    emit('refreshList')

    form.value.name = ''
    form.value.text = ''
    form.value.image = ''
    form.value.price = ''
    form.value.originPrice = ''
    form.value.unit = ''
    dialogVisible.value = false
}

const submitModify = async () => {
    // 验证
    await fromRef.value.validate(); // 如果验证失败会抛出异常
    console.log(form);

    // 发起请求
    const data: any = await post("/modify/goods", { // 一般使用扩展符添加属性
        id: record.id,
        ...(form.value),
    }); // 直接提交form
    // console.log('=================data', data);
    if (!data.success) { // 错误处理
        // return alert(data.message);
        return ElMessageBox.alert(data.message);
    }
    // 通知父组件刷新列表
    emit('refreshList');
    dialogVisible.value = false; // 关闭弹窗
}

// 上传头像
// const onUploadSuccess = (res: any) => {
//     const url = 'http://localhost:5188' + res.result.url
//     form.head = url
// }


defineExpose({ showCreate, showModify })




</script>



<template>
    <div>
        <el-dialog v-model="dialogVisible" :title="type === 'create' ? '新增商品' : '修改商品'" width="40%">
            <el-form ref="fromRef" :model="form" label-width="120px">

                <!-- 商品名称 -->
                <FormItemText :form="form" type="name" label="商品名" prop="name" required rule="organizationname" />

                <!-- 商品简介 -->
                <FormItemText :form="form" type="text" label="商品简介" prop="text" required />

                <!-- 商品主图 -->
                <FormItemGoodsImage :form="form" type="image" label="商品主图" prop="image" required rule="image" />

                <!-- 商品原价 -->
                <FormItemText :form="form" type="originPrice" label="商品原价" prop="originPrice" required  rule="number"/>
                
                <!-- 商品现价 -->
                <FormItemText :form="form" type="price" label="商品现价" prop="price" required rule="number" />

                <!-- 商品单位 -->
                <FormItemText :form="form" type="unit" label="商品单位" prop="unit" required  />
            

                





            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false; form.name = ''
                    form.name = ''
                    form.text = ''
                    form.image = ''
                    form.price = ''
                    form.originPrice = ''
                    form.unit = ''
                    ">关闭</el-button>
                    <el-button v-if="type === 'create'" type="primary" @click="submitCreate()">
                        确认
                    </el-button>
                    <el-button v-else type="primary" @click="submitModify()">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>


<style scoped>
.upload {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #d3d3d3;
}

.upload-icon {
    width: 80px;
    height: 80px;
    font-size: 40px;
}

.head {
    width: 100px;
    height: 100px;
}
</style>